<template>
	<view class="pageBg">
		<view class="cacheContainer">
			<block v-for="(item, index) in localData" :key="item.key">
				<view class="cacheItem">
					<view class="itemTitle flex_r_sb_c">
						<text class="f_32 fw_500 tc_1">{{item.name}}</text>
						<view class="flex_r_fs_c">
							<text class="iconfont icondelete f_40 tc_d" @click.stop="handleDelete(item, index)"></text>
						</view>
					</view>
					<view :class="[item.expan? 'expanOut':'expanIn', 'itemCnt', 'f_24', 'fw_400', 'tc_8', 'flex_c_fs_fs']">
						<text v-if="item.type === 1" class="margin_b16">缓存日期: {{item.data.date}}</text>
						<view class="flex_c_fs_fs">
							<text class="margin_b8">缓存内容:</text>
							<text style="word-wrap:break-word;word-break:break-all;">{{item.json}}</text>
						</view>
					</view>
					<view class="itemExpan flex_r_c_c" @click.stop="handleExpan(index)">
						<text :class="['iconfont', item.expan?'iconupArrow':'icondownArrow', 'f_40', 'tc_8']"></text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// type: 1 => Object, 2 => Array
				localKey: [
					{name: '今日天气', value: 'weather', type: 1},
					{name: '农历分析', value: 'lunar', type: 1},
					{name: '组件轮播', value: 'workSwiper', type: 1},
					{name: '用户信息', value: 'userInfo', type: 1},
					{name: 'TODO', value: 'todo', type: 1},
					{name: '星座详解', value: 'consList', type: 2},
					{name: '汽车品牌大全', value: 'carsList', type: 2},
					{name: '搜索历史', value: 'history', type: 2},
				],
				localData: [],
			};
		},
		onLoad() {
			this.getLocalData()
		},
		methods: {
			getLocalData() {
				let localData = []
				this.localKey.forEach((item, index) => {
					let keyName = 'moon|' + item.value
					if(uni.getStorageSync(keyName)) {
						localData.push({
							name: item.name,
							key: item.value,
							type: item.type,
							data: uni.getStorageSync(keyName),
							json: item.type === 1? JSON.stringify(uni.getStorageSync(keyName).data) : JSON.stringify(uni.getStorageSync(keyName)),
							expan: false,
						})
					}
				})
				this.localData = localData
			},
			handleExpan(i) {
				this.localData[i].expan = !this.localData[i].expan
			},
			handleDelete(e, i) {
				const _this = this
				uni.showModal({
					title: '提示',
					content: '是否清除 ' + e.name + ' 缓存数据?',
					success(res) {
						if(res.confirm) {
							let keyName = 'moon|' + e.key
							uni.removeStorageSync(keyName)
							_this.localData.splice(i, 1)
							_this.$tool.msg('清除成功!', 'success')
						}
					}
				})
			},
		},
	}
</script>

<style lang="scss">
page {
	background-color: #F8F8F8;
	height: 100%;
}
</style>
<style lang="scss" scoped>
.pageBg {
	.cacheContainer {
		width: 100%;
		padding-top: 16rpx;
		box-sizing: border-box;
		.cacheItem {
			width: 100%;
			background-color: #FFF;
			margin-bottom: 16rpx;
			.itemTitle {
				height: 80rpx;
				padding: 0 28rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #F8F8F8;
			}
			.itemCnt {
				padding: 28rpx 28rpx;
				box-sizing: border-box;
				max-height: 320rpx;
				overflow: hidden;
			}
		}
	}
}
.expanOut {
	animation: expanOut 1s linear 1;
	animation-fill-mode: forwards;
}
@keyframes expanOut {
	0% {
		max-height: 320rpx;
	}
	25% {
		max-height: 960rpx;
	}
	50% {
		max-height: 1600rpx;
	}
	100% {
		max-height: 1920rpx;
		overflow: auto;
	}
}

.expanIn {
	animation: expanIn 1s linear 1;
	animation-fill-mode: forwards;
}
@keyframes expanIn {
	0% {
		max-height: 1920rpx;
	}
	25% {
		max-height: 960rpx;
	}
	50% {
		max-height: 640rpx;
	}
	100% {
		max-height: 320rpx;
		overflow: hidden;
	}
}
</style>
